<template>
  <div id="UserRegisterContent">
    <el-row>
      <el-col :span="5" :offset="5">
        <div class="div_border_title">
          <h2>绵阳人才市场</h2>
        </div>
      </el-col>
    </el-row>
    <el-row class="regiterContent">
      <el-col :span="12" :offset="6">
        <div class="formInput">
          <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="0px" class="demo-ruleForm">
            <el-form-item prop="accountNumber">
              <el-input type="text" v-model="registerForm.accountNumber" auto-complete="off" placeholder="请输入手机号/邮箱">
                <p slot="append" v-on:click="addDomain()" style="font-size:10px;cursor:pointer;color:#20a0ff;"
                   v-if="showBtn ===true">{{verifyCodeNumber}}</p>
                <p v-else slot="append" style="font-size:10px;cursor:pointer;color:#20a0ff;">
                  重新发送{{CountdownNum}}s
                </p>
              </el-input>
            </el-form-item>
            <el-form-item prop="verifyCode">
              <el-input type="text" v-model="registerForm.verifyCode" auto-complete="off" placeholder="验证码"></el-input>
            </el-form-item>
            <el-form-item prop="oldpass">
              <el-input type="password" v-model="registerForm.pass" auto-complete="off" placeholder="输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="oldpass">
              <el-input type="password" v-model="registerForm.checkPass" auto-complete="off"
                        placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item class="btnForm">
              <el-row :gutter="20">
                <el-col :span="10" :offset="2">
                  <el-button type="primary" @click="touserEntry()">返回</el-button>
                </el-col>
                <el-col :span="10">
                  <el-button type="primary" @click="submitForm('registerForm')">确认</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'UserRegisterContent',
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'))
        }
      }
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号/邮箱'))
        } else if (value.indexOf('@') < 0) {
          if (value.length != 11) {
            callback(new Error('输入手机号码格式错误！'))
          } else {
            this.accountType = 0
          }
        } else {
          this.accountType = 1
        }
      }
      return {
        clickNum: 0,
        CountdownNum: 60,
        showBtn: true,//显示btn
        accountType: '',
        verifyCodeNumber: '获取验证码',
        registerForm: {
          accountNumber: '',
          verifyCode: '',
          pass: '',
          checkPass: '',
          checked: false,
        },
        rules: {
          accountNumber: [
            {validator: validatePass3, trigger: 'blur'}
          ],
          verifyCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          oldpass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          newpass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
        }
      }
    },
    created () {

    },
    methods: {
      open (type, message) {
        this.$message({
          type: type,
          message: message
        })
      },
      touserEntry () {
        this.$router.push({path: '/UserEntry'})
      },
      Countdown () {
        if (this.CountdownNum === 0) {
          this.showBtn = true
          this.CountdownNum = 60
          return
        } else {
          this.CountdownNum--
        }
        setTimeout(() => {this.Countdown()}, 1000)
      },
      submitForm () {
        var jsSHA = require('jssha')
        var shaObj = new jsSHA('SHA-256', 'TEXT')
        shaObj.update(this.registerForm.pass)
        var hash = shaObj.getHash('HEX')
        var _this = this
        var userParam1 = new Object()
        userParam1.bind_account = _this.registerForm.accountNumber
        userParam1.user_password = hash
        userParam1.verifiy_code = _this.registerForm.verifyCode
        postDataToServer('PASSWORD_RESET', userParam1).then(function (data) {
          if (data.status == 0) {
            _this.open('success', '修改成功')
            _this.registerForm = ''
          } else {
            _this.open('warning', data.message)
          }
        })
      },
      addDomain () {
        this.clickNum++
        if (this.clickNum > 1) {
          this.open('warning', '您的操作过于频繁，请稍后再试！')
          return
        }
        if (this.registerForm.accountNumber != '') {
          var _this = this
          var userParam2 = new Object()
          userParam2.bind_account = this.registerForm.accountNumber
          userParam2.account_type = this.accountType,
            userParam2.verify_type = '3',
            postDataToServer('CAPCHA_GET', userParam2).then(function (data) {
              _this.clickNum = 0
              _this.verifyCodeNumber = data.data_list
              if (data.status == 0) {
                _this.open('success', '获取验证码成功！')
                _this.showBtn = false
                _this.Countdown()
                _this.m = true
              } else {
                _this.open('warning', data.message)
              }
            }).catch((e) => {
              _this.clickNum = 0
            })
        } else {
          this.open('warning', '未输入手机号/邮箱')
        }
      }
    }
  }
</script>
<style scoped>
  .background {
    text-align: left;
    margin-top: 0.9em;
    background-color: #FAFAFA;
  }

  .title {
    border-bottom: 1px solid #F2F2F2;
    padding: 0.5em;
    color: #575B6A;
    font-size: 1.3em;
  }

  #UserRegisterContent {
    margin-top: 2em;
    padding-left: 2em;
  }

  .registerForm {
    margin-top: 1em;
    border-top: 1px solid #105ab9;
  }

  .regiterContent {
    /*width: 400px;*/
    margin-top: 2em;
  }

  .btnForm button {
    width: 100%;
  }
</style>
